<template>
    <div id="wrapper" v-on:mouseup="dragup">
	  <div id="jspiano" class="noselect">
		  <button v-if="!piano.Loadstate" @click="PianoLoad">PianoLoad</button>
		  <button v-if="piano.LoadCount == 88" @click="PianoStart">PianoStart</button>
		  <button v-if="piano.LoadCount == 88" @click="PianoPause">PianoPause</button>
		  <button v-if="piano.LoadCount == 88" @click="PianoStop">PianoStop</button>
		  <button v-if="piano.LoadCount == 88" @click="PianoReset">PianoReset</button>
		  <span v-if="piano.LoadCount<88&&piano.Loadstate" style="color:red;">{{ piano.LoadCount/88*100 }}%</span>
		  <div v-if="piano.LoadCount == 88" id="progressbar" v-on:click="toTime" v-on:mousemove="dragmove">
			  <div id="fill" v-bind:style="piano.progressbar"></div>
			  <div draggable="false" class="progressbarbutton" v-on:mousedown="drag" v-on:mouseup="dragup"></div>
		  </div>
		  <span v-if="piano.LoadCount == 88">{{ piano.NowTime }}/{{ piano.AllTime }}</span>
	  </div>
      <Header></Header>
      <router-view></router-view>
      <Footer></Footer>
    </div>
</template>

<script>
import Header from "./share/header";
import Footer from "./share/footer";
import Piano from "../extra/JS-Piano";

export default {
  data() {
    return {
      piano: Piano,
	  draggable:false,
	  progressbarLeft:0,
	  progressbarWidth:0
    };
  },
  mounted() {},
  methods: {
	dragup:function(){
		this.draggable=false;
	},
	dragmove:function(event){
		if(this.draggable){
			let offsetX=event.clientX-this.progressbarLeft;
			if(offsetX>this.progressbarWidth) {
				offsetX=this.progressbarWidth;
			} else if(offsetX<0) {
				offsetX=0;
			}
			this.piano.progressbar="width:"+offsetX/180*100+"%;";
			this.piano.Played=Math.round(offsetX/180*this.piano.AllRhythm*8);
			let MusicTime=new Date((this.piano.Played+1)*(60000 / (this.piano.Speed * 8))-28800000);
			this.piano.NowTime=this.piano.PrefixInteger(MusicTime.getMinutes(),2)+":"+this.piano.PrefixInteger(MusicTime.getSeconds(),2);
		}
	},
	drag:function(){
		this.draggable=true;
		this.progressbarLeft=document.getElementById('progressbar').offsetLeft;
		this.progressbarWidth=document.getElementById('progressbar').offsetWidth;
	},
	toTime:function(event) {
		if (event.target.className!="progressbarbutton") {
			this.piano.progressbar="width:"+event.offsetX/180*100+"%;";
			this.piano.Played=Math.round(event.offsetX/180*this.piano.AllRhythm*8);
			let MusicTime=new Date((this.piano.Played+1)*(60000 / (this.piano.Speed * 8))-28800000);
			this.piano.NowTime=this.piano.PrefixInteger(MusicTime.getMinutes(),2)+":"+this.piano.PrefixInteger(MusicTime.getSeconds(),2);
		}
	},
    PianoLoad: function() {
      this.piano.init();
      this.PianoReset();
    },
    PianoStart: function() {
      this.piano.play();
    },
    PianoPause: function() {
      this.piano.pause();
    },
    PianoReset: function() {
      this.piano.setmusic(this.piano.demomusic('histheme'))
    },
    PianoStop: function() {
      this.piano.stop()
    }
  },
  components: {
    Header,
    Footer
  }
};
</script>

<style>
#progressbar {
	position:relative;
	display:inline-flex;
	top:-1.7px;
    width:180px;
    height:2.5px;
	background-color: #eee;
}
#fill {
	width:0;
	height:inherit;
    text-align: center;
    background-color: #6caf00;
}
.progressbarbutton {
    background-color: #eee;
    width: 5px;
    height: 5px;
    position: relative;
    text-align: center;
    top: -2px;
	left:-2.5px;
    border-radius: 10px;
    border: green solid 1px;
}
.noselect {
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
</style>

